﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>  
<jsp:useBean id="PriceUtils" class="com.iman.common.util.PriceUtils" scope="page" />

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="apple-itunes-app" content="app-id=591578609">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<meta name="description" content="德瑞姆网校" />
<meta name="keywords" content="德瑞姆网校、心理学、考试"/>
<link href="${imgpath}/images/favicon.ico" type="image/x-icon" rel="shortcut icon" /> 
<link rel="stylesheet" type="text/css" href="${csspath}/style/style.css">
<link rel="stylesheet" type="text/css" href="${csspath}/style/index.css">
<link rel="stylesheet" type="text/css" href="${csspath}/style/h_index.css">
<link rel="stylesheet" type="text/css" href="${csspath}/style/shop.css">
<!--[if IE 7]>
<link rel="stylesheet" href="/css/font-awesome/css/font-awesome-ie7.min.css">
<![endif]-->

<title>德瑞姆教育</title>

<script type="text/javascript"src="${jspath}js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" >
	// var promotions = ${promotion};	
	$(document).ready(function(){
		$('#allcheck').change(function(){
			$('.shop_shopbody01 input').attr('checked', $(this).is(':checked'));
			calculateAmount();
		});

		$('.shop_shopbody01 input').change(function(){
			var size = $('.shop_shopbody01 input').size();
			var chk = $('.shop_shopbody01 input:checked').size();
			if(chk < size){
				$('#allcheck').attr('checked', false);
			}else if(chk == size){
				$('#allcheck').attr('checked', true);
			}
			calculateAmount();
		});

		$('#studym').change(function(){
			calculateAmount();
		});

		$('.shop_shopbodycount').click(function(){
			var chk = $('.shop_shopbody01 input:checked').size();
			if(chk == 0){
				alert('请选择要结算的课程！');
			} else{
				var url = '/shop/shopsure?useCredit=' + $('#studym').is(':checked');
				$('.shop_shopbody01 input:checked').each(function(){
					url += '&cartId=' + $(this).val();
				});
				location.href = url;
			}
		});

		calculateAmount();
	});

	function calculateAmount(){
		var cartId = [];
		$('.shop_shopbody01 input:checked').each(function(){
			cartId.push($(this).val());
		});

		$('#payCount').html(cartId.length);

		var useCredit = $('#studym').is(':checked');
		// var credit = parseFloat(useCredit ? '${coin.userLearncredit}' : '0.00');		
		// var creditText = useCredit ? '${PriceUtils.CoinToYuan(coin.userLearncredit)}' : '0.00';
		// $('#sumAmount p span').get(2).innerText = '－' + credit;

		if(cartId.length == 0){
			$('#sumAmount p span').get(0).innerHTML = '0.00';
			$('#sumAmount p span').get(1).innerHTML = '－0.00';
			$('#payAmount').get(0).innerHTML = '0.00';
		} else {
			$.post('/shop/calculateAmount', {cartId: cartId, useCredit: useCredit}, function(rs) {
				$('#sumAmount p span').get(0).innerHTML = rs.sumAmount;
				$('#sumAmount p span').get(1).innerHTML = '－' + rs.promotion.toFixed(2);
				$('#payAmount').get(0).innerHTML = rs.payAmount.toFixed(2);
				$('#sumAmount p span').get(2).innerHTML = '－' + rs.useCredit.toFixed(2);
			}, 'json');
		}
	}

	function delBuyCart(cartId){
		$('#CART_' + cartId).remove();
		$.get('/shop/cart/delete/' + cartId, {}, function(result) {
			
		}, 'json');
		calculateAmount();
	}
</script> 

</head>
<body align="center" style="padding:0;margin:0 auto;clear:both; align:center;">

<!--topNav-->
  <%@include   file="../header_menu.jsp" %>
<!--end topNav-->

<div class="shop_nav">
<a href="#">
	<div class="shop_nav01"> 1.我的购物车 </div>
	<div class="shop_nav02"> </div>
	</a>
	
	<div class="shop_nav03"> </div>
	<div class="shop_nav04"> 2.确认订单信息 </div>
	<div class="shop_nav05"> </div>

	
	<div class="shop_nav03"> </div>
	<div class="shop_nav04"> 3.购买成功 </div>
	<div class="shop_nav05"> </div>

</div>
<div class="shop_bodylist">
	<div class="shop_bodytitle"> 我的购物车 </div>
	<div class="shop_shopdiv">
		<div class="shop_shoptitle">
			<div class="shop_shoptitle01">
				<input type="checkbox" checked id="allcheck" />
				<label for="allcheck" style="margin-left:5px;">全选</label>
			</div>
			<div class="shop_shoptitle02">
				<div class="shop_shoptitle02"> 商品名称 </div>
			</div>
			<div class="shop_shoptitle03"> 价&nbsp;格 </div>
			<div class="shop_shoptitle03"> 操&nbsp;作 </div>
		</div>
		
		
		<c:forEach var="course" items="${courseInfos}" varStatus="cnstatus">
		<div class="shop_shopbody" id="CART_${course.cartId}">
			<div class="shop_shopbody01">
				<input type="checkbox" checked value="${course.cartId}" />
			</div>
			<div class="shop_shopbody03">
				<div class="shop_shopbody03pic"> <img height="68px" with="82px" src="${drmFilePath}/${course.coursePimg}" style="border:1px solid #DDD;"/> </div>
				<div class="shop_shopbody03text">
					<p>${course.courseNm} </p>
					<p style="color:#666">讲师：${course.courseTeachernm} </p>
				</div>
			</div>
			<div class="shop_shopbody04"> ¥ ${PriceUtils.CoinToYuan(course.curPrice)}</div>
			<div class="shop_shopbody04"> <a href="#" onclick="delBuyCart(${course.cartId});" style="color:#0A8CD2"> 删除 </a> </div>
		</div>
		</c:forEach>

		<div class="shop_shoptitle" style="border-bottom:none;border-top:none;height:90px; ">
			<div class="shop_shoptitle01" style="width:auto;">
				<input type="checkbox" id="studym"/>
				<label for="studym" style="margin-left:5px;">使用学习币</label>
				<span style="color:#666">(余额： ${coin.userLearncredit})</span>
			</div>
			
			<div id="sumAmount" class="shop_shoptitle03" style="width:180px;text-align:left;float:right;margin-right:40px;">
				<p>总计：¥<span style="float:right;">0.00</span></p>
				<p>优惠：¥<span style="float:right;">－0.00</span></p>
				<p>学习币支付：¥<span style="float:right;">－0.00</span></p>
			</div>
		</div>
		
		<div class="shop_shoptitle" style="border-bottom:none;border-top:none;height:40px;background-color:#EFEFEF ">
			<div class="shop_shoptitle01" style="width:auto;">
				
			</div>
			<div class="shop_shoptitle02" style="width:530px;line-height:40px;"> 已选课程
			<span id="payCount" style="font-size:14px;color:#FF6600">0</span> 门</div>
			<div class="shop_shoptitle03" style="width:170px;text-align:left;line-height:40px;">
				<p>总合计：<span id="payAmount" style="float:right;font-size:16px;color:#FF6600">¥0.00</span></p>
				
			</div>
			
			<a href="#"> <div class="shop_shopbodycount"> 去结算</div> </a>
			
		</div>
		
	</div>
</div>

<!--footer -->
  <%@include   file="../footer.jsp" %>
<!--footer-->

</body>
</html>